import React, { useEffect, useState } from 'react';
import type { IOptionType } from '../../type';
import { RightOutlined } from '#/utils/antdIcons.js';
import styles from './index.less';

interface IProps {
  /**
   * 值
   */
  value?: string;
  /**
   * 禁用
   */
  disabled?: true;
  /**
   * 改变事件
   */
  onChange?: (e: any) => void;
  /**
   * 选项
   */
  options: IOptionType[];
}

const Steps = (props: IProps) => {
  const { options = [], value: _value, onChange, disabled = false } = props;
  const [value, setValue] = useState<any>();

  useEffect(() => {
    if (_value) {
      setValue(_value);
    } else {
      setValue(options[0].value);
    }
  }, [_value]);

  const onClick = (item: IOptionType) => {
    if (item.value !== value && !disabled && !item.disabled) {
      setValue(item.value);
      onChange && onChange(item.value);
    }
  };

  return (
    <div className={styles.container}>
      {options.map((item, index) => {
        return (
          <div className={styles.item} key={item.value}>
            <div
              className={`${styles.left} ${value === item.value && styles.activeLeft} ${
                disabled || (item.disabled && styles.disLeft)
              }`}
              onClick={() => onClick(item)}
            >
              <div
                className={`${styles.index} ${value === item.value && styles.activeIndex} ${
                  disabled || (item.disabled && styles.disIndex)
                }`}
              >
                {index + 1}
              </div>
              <div className={styles.label}>{item.label}</div>
            </div>
            {index !== options.length - 1 && (
              <div className={styles.right}>
                <RightOutlined className={styles.logo} />
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
};

export default Steps;
